﻿

<!DOCTYPE html>
<html>
<head>
    <title>The Board</title>
    <link rel="stylesheet" href="style_sheet.css">
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.6"></script>

    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.5.0"></script>

    <script type="text/javascript">
        var obs = [];
        var gLinks1 = [];
        var gLinks2 = [];
        var linksCounter = 0;
        var globalLinksCounter = 0;
        var counter = 0;
        var lastClickedRectangle;
        var drag = d3.behavior.drag()
            .on("drag", dragmove);

        /**
         * Handles click event on a box element
         * marks box as selected if it is not or deselects otherwise
         * Connects with link to previously selected box if there is one
         */
        function click(d)
        {
            
            if (selectedBoxToConnect == -1)
            {
                selectedBoxToConnect = d3.select(this).attr("class");
                lastClickedRectangle = d3.select(this);
                document.getElementById("alibi_id").value = obs[d3.select(this).attr("class")].alibi;
                document.getElementById("note_id").value = obs[d3.select(this).attr("class")].note;
                d3.select(this).attr("stroke-width", 4);
            }
                
            else if (selectedBoxToConnect == d3.select(this).attr("class"))
            {
                lastClickedRectangle.attr("stroke-width", 1);
                document.getElementById("alibi_id").value = "";
                document.getElementById("note_id").value = "";
                lastClickedRectangle = null;
                selectedBoxToConnect = -1;
                return;
            }
            else {
                lastClickedRectangle.attr("stroke-width", 1);
                var index1 = selectedBoxToConnect;
                var index2 = d3.select(this).attr("class");
                var temp = new Object();
                temp.ob1 = obs[index1];
                temp.ob2 = obs[index2];
                temp.color = "gray";

                var line = groupLinks.append("line")
                            .attr("class", globalLinksCounter)
                            .style("stroke", "gray")
                            .attr("stroke-width", 6)
                            .attr("x1", temp.ob1.x + 127)
                            .attr("y1", temp.ob1.y + 50)
                            .attr("x2", temp.ob2.x + 127)
                            .attr("y2", temp.ob2.y + 50)
                            .on("click", clickLine);
                temp.line = line;
                gLinks1[globalLinksCounter] = temp;
                obs[index1].links[obs[index1].linkCounter] = temp;
                obs[index2].links[obs[index2].linkCounter] = temp;

                document.getElementById("alibi_id").value = obs[d3.select(this).attr("class")].alibi;
                document.getElementById("note_id").value = obs[d3.select(this).attr("class")].note;

                obs[index1].linkedTo[obs[index1].linkCounter] = index2;
                obs[index2].linkedTo[obs[index2].linkCounter] = index1;
                obs[index1].linkCounter++;
                obs[index2].linkCounter++;
                globalLinksCounter++;

                lastClickedRectangle = null;
                selectedBoxToConnect = -1;
                document.getElementById("alibi_id").value = "";
                document.getElementById("note_id").value = "";
            }
        }


        /**
         * Handles line click event
         * changes color of a line or erases the line if all the colors have been rotated
         */
        function clickLine()
        {
            var cl = d3.select(this).attr("class");
            switch (gLinks1[cl].color) {
                case "gray":
                    d3.select(this).style("stroke", "green");
                    gLinks1[cl].color = "green";
                    break;
                case "green":
                    d3.select(this).style("stroke", "red");
                    gLinks1[cl].color = "red";
                    break;
                case "red":
                    d3.select(this).style("stroke", "blue");
                    gLinks1[cl].color = "blue";
                    break;
                case "blue":
                    d3.select(this).style("stroke", "orange");
                    gLinks1[cl].color = "orange";
                    break;
                case "orange":
                    d3.select(this).attr("stroke-width", 0);
                    gLinks1[cl].color = "";
                    break;
            }
        }

        /**
        * Handles mouseover event over a box
        * changes color of a box if hovered over
        */
        function mouseover(d) {

            d3.select(this).style("fill", "gray");
            tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
        }

        /**
        * Handles mouseout event of a box
        * changes back to original color when mouse leave the box area
        */
        function mouseout(d) {

            d3.select(this).style("fill", "#F8ECC2");
            d3.select(this).attr("fill-opacity", 0.85);
        }

        /**
        * Creates a new instance of a box object
        * new object is given attributes corresponding to data from a Add Person form
        * Object holds an svg group representing the graphical aspect of the Object - the box
        */
        function newObject() {
            var data = [10, 20, 30];
            var grup = groupNodes
                 .append("svg:g")
                 .call(drag)
                 .attr("class", counter);

            var h = grup.append("rect")
                .attr("class", counter)
                .attr("x", 25)
                .attr("y", 25)
                .attr("height", 300)
                .attr("width", 200)
                .attr("stroke", "#000")
                .attr("stroke-width", 1)
                .style("fill", "#F8ECC2")
                .on("click", click)
                .on("mouseover", mouseover)
                .on("mouseout", mouseout);

            var name = grup.selectAll("name")
            .data([0])
            .enter()
            .append("text");

            var age = grup.selectAll("age")
           .data([0])
           .enter()
           .append("text");

            var textLabels = name
            .attr("x", 30)
            .attr("y", 20)
            .text(function (d) { return document.getElementById("nameInput").value; })
            .attr("font-family", "sans-serif")
            .attr("font-size", "35px")
            .attr("fill", "navy");

            var ageLabels = age
            .attr("x", 65)
            .attr("y", 170)
            .text(function (d) { return "Age: " + document.getElementById("ageInput").value + "";})
            .attr("font-family", "sans-serif")
            .attr("font-size", "30px")
            .attr("fill", "blue");

            var state = grup.selectAll("state")
           .data([0])
           .enter()
           .append("text");

            var e = document.getElementById("listInput");
            var st = e.options[e.selectedIndex].value;
            var stateLabels = state
            .attr("x", 65)
            .attr("y", 140)
            .text(function (d) { return st; })
            .attr("font-family", "sans-serif")
            .attr("font-size", "30px")
            .attr("fill", "blue");

            var imgs = grup.selectAll("image").data([0]);
            imgs.enter()
            .append("svg:image")
            .attr("xlink:href", "Resourses/spendlik.png")
            .attr("x", "100")
            .attr("y", "10")
            .attr("width", "50")
            .attr("height", "50");
                      
           var imgss = grup.selectAll("image").data([0]);
            imgs.enter()
            .append("svg:image")
            .attr("class", counter)
            .attr("xlink:href", "Resourses/person_ico.png")
            .attr("x", "75")
            .attr("y", "200")
            .attr("width", "100")
            .attr("height", "100");

            var temp = new Object();
            temp.cell = grup;
            temp.x = 25;
            temp.y = 25;
            temp.linkCounter = 0;
            var linkedTo = [];
            temp.linkedTo = linkedTo;
            var links = [];
            temp.links = links;
            obs[counter] = temp;
            temp.alibi = document.getElementById("myTextAreaAlibi").value;
            temp.note = document.getElementById("myTextAreaNote").value;
            
            counter++;

        }

        /**
        * Handles a drag event raised by dragging a box
        * changes boxes x,y attributes accordinglz as well as x,y attributes of all lines connected to it
        */
        function dragmove(d) {
            var x = d3.event.x - 100;
            var y = d3.event.y - 100;
            obs[d3.select(this).attr("class")].x = x;
            obs[d3.select(this).attr("class")].y = y;
            d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
            
            for(var i=0; i < obs[d3.select(this).attr("class")].linkCounter ; i++)
            {
                var tempLine = obs[d3.select(this).attr("class")].links[i].line;
                tempLine.attr("x1", obs[d3.select(this).attr("class")].links[i].ob1.x + 127);
                tempLine.attr("y1", obs[d3.select(this).attr("class")].links[i].ob1.y + 50);
                tempLine.attr("x2", obs[d3.select(this).attr("class")].links[i].ob2.x + 127);
                tempLine.attr("y2", obs[d3.select(this).attr("class")].links[i].ob2.y + 50);
            }
        }

        /**
        * Deletes a selected box and erases its attached links
        */
       
        function deleteBox()
        {
            if (selectedBoxToConnect == -1) return
            else
            {
                obs[selectedBoxToConnect].cell.remove();
                for (var i = 0; i < obs[selectedBoxToConnect].linkCounter ; i++)
                {
                    obs[selectedBoxToConnect].links[i].line.attr("stroke-width", 0);
                }
                obs[selectedBoxToConnect].links = null;
                lastClickedRectangle = null;
                selectedBoxToConnect = -1;
                document.getElementById("alibi_id").value = "";
                document.getElementById("note_id").value = "";
            }
        }
    </script>

</head>

<body>
    
        <div style="position: fixed; bottom: 10px; right: 10px; border: 0px solid; border-radius: 8px; ">
                <textarea id="alibi_id" rows="5" cols="40" placeholder="Alibi" readonly style="background-image: url('textAreaBackgroundAlibi.png'); background-position: center; background-repeat: repeat-x; border: solid 1px; border-radius: 8px; "></textarea>
                <textarea id="note_id" rows="5" cols="40" placeholder="Notes" readonly style="background-image: url('textAreaBackgroundNote.png'); background-position: center; background-repeat: repeat-x; border: solid 1px; border-radius: 8px; "></textarea>
            </div>
        <div style="position: fixed; bottom: 120px; right: 10px;">
            <br />
           <!-- <a href="#openModal"><b><font style="font-family: Geneva CE, Arial CE, sans-serif;">Add person</font></b></a><br/><br />-->
            <a href="#openModal" title="Add person"><input id="checkoutbutton" type="button" value="Add person"></a>
            <a title="Delete Box"><input id="checkoutbutton" type="button" value="Delete box" onclick="deleteBox()"></a>
            <!--<center><input type="button" value="Delete Box" onclick="deleteBox()"></center>-->
            <br/>
        </div>

            <!--<a href="#openModal">Add person</a>-->
    <div id="box_3">
        <img id="img1" src="Resourses/detective_ico.png" alt="terminal" style="float:left">
        <h1>The Board</h1>
    </div>

            <div id="openModal" class="modalDialog">
                <div>
                    <a href="#close" title="Close" class="close">X</a>
                    <form>
                        <fieldset>
                            <legend><b>Add new person</b></legend>
                            
                            <div>
                                <img id="img" src="Resourses/person_icon.png" alt="person" style="float:left" width="50" height="50">
                                <p><label id="move">Name:</label><input id="nameInput" type="text" name="firstname" value="enter name..." maxlength=15 onfocus="if (this.value == 'enter name...') this.value = '';"></p>
                                <p><label id="move">Age:</label><input id="ageInput" type="text" name="age" value="enter age..." onfocus="if (this.value == 'enter age...') this.value = '';"></p>
                                <p>
                                    <label id="move">Status:</label>
                                    <select id="listInput" name="browser" class="visibleIf-doNotReset">
                                        <option value="Witness">Witness</option>
                                        <option value="Victim">Victim</option>
                                        <option value="Suspect">Suspect</option>
                                        <option value="Unknown">Unknown</option>
                                    </select>
                                </p>
                            </div>
                            <p><label>Alibi:</label><br /></p>
                            <textarea id="myTextAreaAlibi" rows="3" cols="39" maxlength=160 onfocus="if (this.value == 'enter alibi...') this.value = '';">enter alibi...</textarea>
                            <p><label>Note:</label></p>
                            <textarea id="myTextAreaNote" rows="3" cols="39" maxlength=160 onfocus="if (this.value == 'enter note...') this.value = '';">enter note...</textarea>
                            <p style="margin-left:135px">
                                <a href="#close" title="Add person"><input id="checkoutbutton" type="button" value="Add person" onclick="if ((nameInput.value == 'enter name...') ||
                                    (ageInput.value == 'enter age...') || (ageInput.value == '') ||
                                    (nameInput.value == '')) { alert('Incorrect Parameters') } else { newObject() }"></a>
                                <!--Special button in link to close the form-->
                                <a href="#close" title="Cancel"><input id="checkoutbutton" type="button" value="Cancel"></a>
                            </p>
                        </fieldset>

                    </form>
                </div>
            </div>
            <br />
            <script type="text/javascript">
                //groups to maintain links and boxes, ensuring the "Z-index" of all boxes is higher
                var svgArea = d3.select("body")
                     .append("svg:svg")
                         .attr("width", "100%")
                         .attr("height", "100%")
                         .attr("id", "charts")
                         .attr("y", 70);
                svgArea.append("svg:rect")
                             .attr("width", "100%")
                             .attr("height", "5000")
                             .attr("fill", "none");
                var selectedBoxToConnect = -1;
                var groupLinks = svgArea.append("g");
                var groupNodes = svgArea.append("g");
            </script>

</body>
</html>